<template>
  <el-dialog v-draggable title="配置" :visible.sync="dialogVisible" width="50vw">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="比较参数：" prop="value">
        <el-select style="width: 100%;" v-model="ruleForm.parameterCode" placeholder="请选择">
          <el-option v-for="item in valueList" :key="item.parameterCode" :label="item.parameterName"
            :value="item.parameterCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="比较值：" prop="value">
        <el-input v-model="ruleForm.compValue"></el-input>
      </el-form-item>
      <el-form-item label="值1：" prop="value">
        <el-input @change="oneChange" v-model="ruleForm.cutValueOne"></el-input>
      </el-form-item>
      <el-form-item label="值2：" prop="value">
        <el-input @change="twoChange" v-model="ruleForm.cutValueTwo"></el-input>
      </el-form-item>
    </el-form>
    <el-slider v-if="ruleForm.compValue != '' && show" :max="ruleForm.compValue * 1" @input="memoryFunc" v-model="value"
      color="red" range :marks="marks">
    </el-slider>
    <span slot="footer" class="dialog-footer">
      <el-button @click="saveData" type="success">保存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { queryDeviceRealDataInfo } from "@/api/showManage/index"
import { updateTopologyColorSet, queryTopologyColorSet } from "@/api/settingManagement/devicesSetting.js"

export default {
  props: {
    dialogVis: {
      type: Boolean,
      default: () => false
    },
    devCode: {
      type: String,
      default: () => ""
    }
  },
  components: {},
  data () {
    return {
      ruleForm: {
        parameterCode: "",
        compValue: "",
        cutValueOne: "",
        cutValueTwo: ""
      },
      rules: {},
      value: [0, 0],
      marks: {},
      valueList: [],
      show: true
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {//nextTick
      this.silderStyle()
    })
    this.getDetails()
    this.getSelectList()

  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.dialogVis
      },
      set: function (v) {
        this.$emit("update:dialogVis", v)
      }
    }
  },
  methods: {
    silderStyle () {
      let sliderRunway = document.getElementsByClassName("el-slider__runway")
      let memoryTotalLength = "0%"
      sliderRunway[0].style.background = `linear-gradient(to right, green 0%, green ${memoryTotalLength}, red ${memoryTotalLength}, red 100%)`

    },
    memoryFunc () {
      let sliderRunway = document.getElementsByClassName("el-slider__runway")
      this.ruleForm.cutValueOne = this.value[0]
      this.ruleForm.cutValueTwo = this.value[1]
      let memoryTotalLength = (this.value[0] / this.ruleForm.compValue * 100) + "%"
      sliderRunway[0].style.background = `linear-gradient(to right, green 0%, green ${memoryTotalLength}, red ${memoryTotalLength}, red 100%)`
    },
    oneChange (v) {
      this.$set(this.value, 0, v * 1)
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
    twoChange (v) {
      this.$set(this.value, 1, v * 1)
      this.show = false
      this.$nextTick(() => {
        this.show = true
      })
    },
    async getDetails () {
      const { status, success, object, message } = await queryTopologyColorSet({ deviceCode: this.devCode })
      if (status == 200) {
        if (object) {
          this.ruleForm.parameterCode = object.parameterCode
          this.ruleForm.compValue = object.compValue
          this.ruleForm.cutValueOne = object.cutValueOne
          this.ruleForm.cutValueTwo = object.cutValueTwo
          this.value[0] = object.cutValueOne
          this.value[1] = object.cutValueTwo

        }
      }
    },
    async getSelectList () {
      const { status, success, object, message } = await queryDeviceRealDataInfo({ deviceCode: this.devCode })
      if (status == 200) {
        this.valueList = object
      }
    },
    async saveData () {
      const { status, success, object, message } = await updateTopologyColorSet({
        ...this.ruleForm,
        deviceCode: this.devCode
      })
      if (status == 200) {
        this.dialogVisible = false
        this.$message({
          type: "success",
          message: message
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__footer {
    text-align: center !important;
  }
}

::v-deep .el-dialog__header {
  border-radius: 8px 8px 0 0;
  background-color: #e6e6e6;
}

.ml-3 {
  margin-left: 12px;
}


.my_span {
  font-size: 16px;
}

.my_table {
  margin-top: 16px;
}

.dialog-foote {
  text-align: center;
}

// ::v-deep .el-slider__button-wrapper::before {
//   content: attr(data-attr); // !!内容位置
//   position: absolute;
//   width: 20px;
//   height: 25px;
//   line-height: 25px;
//   border-radius: 5px;
//   text-align: center;
//   top: -20px;
//   left: 7.5px;
//   background: rgb(64, 148, 255);
//   color: white;
// }

::v-deep .el-slider__bar {
  background-color: yellow;
}

// ::v-deep .el-slider__runway {
//   background: linear-gradient(to right, rgb(94, 203, 115) 30%, rgb(64, 148, 255) 30%)
// }
</style>

